<script lang="ts" setup>
import LeeCard from '@/base-ui/card/Card.vue'
import {
  PieEchart,
  RoseEchart,
  BarEchart,
  LineEchart,
  MapEchart
} from '@/components/PageEcharts'

import { useDashboardStore } from '@/store/modules/dashboard'

// 使用store
const dashboardStore = useDashboardStore()
dashboardStore.getDashboardDataAction() // 调用方法发起网络请求获得图表数据

// 饼图和玫瑰图
const categoryGoodsCount = computed(() => {
  // 因为这里后端返回的数据格式和图表需要的属性名不一样，所以这里用map加工一下
  /*
    data:[{ name:'',value:'' }]
    categoryGoodsCount:[{ goodsCount:'',name:'' }]
  */
  return dashboardStore.categoryGoodsCount.map((item: any) => {
    return { value: item.goodsCount, name: item.name }
  })
})

// 这里不能直接map 数据有点不一样 分类商品列表
const categoryGoodsSale = computed(() => {
  const goodsSale = dashboardStore.categoryGoodsSale
  const xLabels: string[] = []
  const values: any[] = []
  for (const item of goodsSale) {
    xLabels.push(item.name)
    values.push(item.goodsCount)
  }
  return { xLabels, values }
})

// 对数据里面属性名称做一下处理 支持鼠标滚轮缩放的图
const categoryGoodsFavor = computed(() => {
  const goodsSale = dashboardStore.categoryGoodsFavor
  const labels: string[] = []
  const values: any[] = []
  for (const item of goodsSale) {
    labels.push(item.name)
    values.push(item.goodsFavor)
  }
  return { labels, values }
})

const addressGoodsSale = computed(() => {
  return dashboardStore.addressGoodsSale.map((item: any) => {
    // 做一个映射，因为后端返回的名称和自己定义的不一样
    return { name: item.address, value: item.count }
  })
})
</script>

<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="7">
        <LeeCard title="分类商品数量(饼图)">
          <PieEchart :pie-data="categoryGoodsCount"></PieEchart>
        </LeeCard>
      </el-col>
      <el-col :span="10">
        <LeeCard title="不同城市商品销量">
          <MapEchart :map-data="addressGoodsSale"></MapEchart>
        </LeeCard>
      </el-col>
      <el-col :span="7">
        <LeeCard title="分类商品数量(玫瑰图)">
          <RoseEchart :rose-data="categoryGoodsCount"></RoseEchart>
        </LeeCard>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="el-row2">
      <el-col :span="12">
        <LeeCard title="分类商品列表">
          <LineEchart v-bind="categoryGoodsSale"></LineEchart>
        </LeeCard>
      </el-col>
      <el-col :span="12">
        <LeeCard title="分类商品收藏">
          <BarEchart v-bind="categoryGoodsFavor"></BarEchart>
        </LeeCard>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="less">
.dashboard {
  width: 100%;
  height: 100%;
  .echarts {
    width: 500px;
    height: 500px;
  }
  .el-row2 {
    margin-top: 20px;
  }
}
</style>
